import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import style from './MainLayout.module.scss'
import { Layout, Button, Space, Popover, Flex } from 'antd'
import { FormOutlined } from '@ant-design/icons'
import { LOGIN_PATH } from '../roters'
import useUserInfoStore, { loginOut } from '../hooks/userUserInfoStore'

const { Header, Content, Footer } = Layout

export default function MainLayout() {
  const navigate = useNavigate()
  const { userName } = useUserInfoStore()

  const goHome = () => {
    navigate('/')
  }

  const goLogin = () => {
    // 携带参数跳转
    navigate({
      pathname: LOGIN_PATH,
      search: 'a=1&b=2'
    })
  }

  const RightNameCompon = () => {
    return userName ? (
      <Popover
        trigger={'click'}
        content={
          <Flex gap="middle" vertical>
            <Button type="text">修改密码</Button>
            <Button type="text" onClick={loginOut}>
              退出登录
            </Button>
          </Flex>
        }
      >
        <b>欢迎你：{userName}</b>
      </Popover>
    ) : (
      <Button onClick={goLogin}>登录</Button>
    )
  }

  return (
    <Layout>
      <Header className={style.header}>
        <h1 onClick={goHome}>
          <Space>
            <FormOutlined></FormOutlined>
            <div>问卷大师</div>
          </Space>
        </h1>
        <RightNameCompon />
      </Header>

      <Content className={style.container}>
        <Outlet />
      </Content>

      <Footer className={style.footer}>
        问卷大师 ©{new Date().getFullYear()} Created by Ant UED
      </Footer>
    </Layout>
  )
}
